<!DOCTYPE html>
<html lang="{{ site.lang | default: "en-US" }}">
  <head>

    {% if site.google_analytics %}
      <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
      <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', '{{ site.google_analytics }}');
      </script>
    {% endif %}
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">

{% seo %}
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#157878">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  </head>
  <!-- this is the added Style for Scroll_to_top button -->
  <style>
    #Scroll_to_top {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; 
    right: 30px; 
    z-index: 99; /* Make sure it does not overlap */
    border: 3px solid #155799;  
    outline: none; 
    background-color: transparent;
    color: #159957;  
    cursor: pointer; 
    padding: 15px; 
    border-radius: 35px; 
    font-size: 20px; 
    font-weight: 800;
  }

  #Scroll_to_top:hover {
    /* you can add a background color if you want */
    font-size: 1.4rem;
  }

  body {
    background-color: #fff;
    color: #000;
  }

  #dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 999;
  }


  .dark-mode {
    background-color: rgb(30, 30, 30);
    color: #fff;
  }

  </style>
  <!-- the above is the added Style for Scroll_to_top button -->
  <body>
   

    <header class="page-header" role="banner">
      <center><a href="http://dockerlabs.collabnix.com"><img src="https://raw.githubusercontent.com/collabnix/dockerlabs/master/images/moby_large.png"></a></center>
      <!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/collabnix/kubetools" data-size="large" data-show-count="true" aria-label="Star collabnix/docker-community-extensions on GitHub">Star</a>
      <!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/collabnix/kubetools/fork" data-size="large" data-show-count="true" aria-label="Fork collabnix/docker-community-extensions on GitHub">Fork</a>
     <!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/collabnix/kubetools/subscription" data-icon="octicon-eye" data-size="large" data-show-count="true" aria-label="Watch collabnix/dockertools on GitHub">Watch</a>
      <!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/collabnix" data-size="large" data-show-count="true" aria-label="Follow @collabnix on GitHub">Follow @collabnix</a>
      <h1 class="project-name">{{ page.title | default: site.title | default: site.github.repository_name }}</h1>
      <h2 class="project-tagline">{{ page.description | default: site.description | default: site.github.project_tagline }}</h2> 
      {% if site.github.is_project_page %}
        <a href="{{ site.github.repository_url }}" class="btn">View on GitHub</a>
      {% endif %}
      {% if site.show_downloads %}
        <a href="https://launchpass.com/collabnix" class="btn">Join Slack</a>
     {% endif %}
      {% if site.show_downloads %}
        <a href="https://collabnix.com/kubectl-cheatsheet/" class="btn">Kubectl Cheatsheet</a>
     {% endif %}
        {% if site.show_downloads %}
        <a href="https://kubelabs.collabnix.com/" class="btn">Kubernetes Labs</a>
     {% endif %}
        {% if site.show_downloads %}
        <a href="https://twitter.com/kubetools" class="btn">Follow us on Twitter</a>
     {% endif %}
          
    </header>
    <!--  this is the added html for Scroll_to_top button --> 
    <button onclick="topFunction()" id="Scroll_to_top" title="Go to top">&#8679;</button>
    <!--  the above is the added html for Scroll_to_top button --> 

    <!--  the is the added to provide dark mode when clicked on toggle--> 
    <button id="dark-mode-toggle">
      <svg style="color: rgb(70, 154, 229);" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 
        <path d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8V16Z" fill="#469ae5"></path>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM12 4V8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16V20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4Z" fill="#469ae5"></path> 
      </svg>
    </button>
    


    <main id="content" class="main-content" role="main">
      
      {{ content }}
    
      <div>

              <h3> Join Collabnix Community on Discord </h3>
        
       <iframe src="https://discordapp.com/widget?id=1020180904129335379&theme=dark" width="830" height="500" allowtransparency="true" frameborder="0"></iframe>
        {% if site.github.is_project_page %}
       <a class="twitter-timeline" data-width="1200" data-height="500" href="https://twitter.com/collabnix?ref_src=twsrc%5Etfw">Tweets by collabnix</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

             
          <span class="site-footer-owner"><a href="{{ site.github.repository_url }}">{{ site.github.repository_name }}</a> is maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a>.</span>
        {% endif %}
              {% if site.show_downloads %}   
      {% endif %}
       <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.
         <div align="center">
          <img src="https://hitwebcounter.com/counter/counter.php?page=7703277&style=0006&nbdigits=5&type=page&initCount=0" title="Total Website Hits" Alt="Web Hits"   border="0" /></a>        
         </div>   
        </span> 
        <div id="wcb" class="carbonbadge"></div>
<script src="https://unpkg.com/website-carbon-badges@1.1.1/b.min.js" defer></script>
      </footer>
    </main>
    <!-- Place this tag in your head or just before your close body tag. -->

<script async defer src="https://buttons.github.io/buttons.js"></script>
<!-- this is the added Script for Scroll_to_top button -->
<script>
  let mybutton = document.getElementById("Scroll_to_top");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

// When the user will click on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}

const darkModeToggle = document.querySelector('#dark-mode-toggle');

darkModeToggle.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
});

</script>
<!-- the above is the added Script for Scroll_to_top button -->
  </body>
</html>
      
